<!-- 
	background: 背景颜色 navigationBarBackgroundColor
	type: 标题栏字体颜色 navigationBarTextStyle: white black 
	title: 标题
	
	引入方式：
	<c-header background="#09f" type="white" title="标题">
		 
	</c-header> 
	
-->
<template>
	<view class="head">
		<!-- #ifdef MP-WEIXIN -->
		<view class="header" :class="type" :style="{'height':(menuButtonInfo.top+menuButtonInfo.height+8)+'px'}">
			<view class="fix-wrap" :style="{'background':background,'height':(menuButtonInfo.top+menuButtonInfo.height+8)+'px'}">
				<view class="status-bar" :style="{'height':systemInfo.safeArea.top+'px'}"></view> 
				<view class="content header-content" :style="{'top':menuButtonInfo.top+'px','height':menuButtonInfo.height+'px'}">
					<!-- <slot name="content" ></slot> -->
					<!-- <navigator open-type="navigateBack" :delta="1" hover-class="none" class="btn back iconfont f-s44">&#xe63b;</navigator> -->
					<view class="title split f-wb" :style="{'height':menuButtonInfo.height+'px','line-height':menuButtonInfo.height+'px'}">{{title}}</view>
				</view>
			</view>	
		</view>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view class="header" :class="type" :style="{'height':(systemInfo.safeArea.top+44)+'px'}">
			<view class="fix-wrap" :style="{'background':background,'height':(systemInfo.safeArea.top+44)+'px'}"> 
				<view class="content" style="height:44px">
					<slot name="content" ></slot>
					<!-- <navigator open-type="navigateBack" :delta="1" hover-class="none" class="btn back iconfont f-s44">&#xe63b;</navigator>
					<view class="title split">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</view>
					<view class="btn iconfont f-s44">&#xe63b;</view> -->
				</view>
			</view>	
		</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->
		<view class="header" :class="type" :style="{'height':(systemInfo.safeArea.top+44)+'px'}">
			<view class="fix-wrap" :style="{'background':background,'height':(systemInfo.safeArea.top+44)+'px'}">
				<view class="status-bar" :style="{'height':systemInfo.statusBarHeight+'px'}"></view> 
				<view class="content" style="height:44px">
					<slot name="content" ></slot>
					<!-- <navigator open-type="navigateBack" :delta="1" hover-class="none" class="btn back iconfont f-s44">&#xe63b;</navigator>
					<view class="title split">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</view>
					<view class="btn iconfont f-s44">&#xe63b;</view> -->
				</view>
			</view>	
		</view>
		<!-- #endif -->
		
		<!-- 胶囊按钮 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="mp-menuButton white" :style="{'top':menuButtonInfo.top+'px','width':(menuButtonInfo.width-2)+'px','height':(menuButtonInfo.height-2)+'px'}">
			<view class="btn iconfont">&#xe63b;</view>
			<view class="line"></view>
			<view class="btn iconfont">&#xe63c;</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default{
	name:'header',
	data(){
		return {
			systemInfo:uni.getSystemInfoSync(),     // 系统信息
			menuButtonInfo : {} ,    // 微信胶囊按钮
		}
	},
	props:{
		background:{
			type:String,
			default() {
				return '#ffffff';
			}
		},
		type:{
			type:String,
			default() {
				return 'black';
			}
		},
		title:{
			type:String,
			default() {
				return '';
			}
		}
	},
	onReady() {
		console.log(12323123,this.systemInfo)
		if(this.type=='black'){ 
			setTimeout(()=>{
				uni.setNavigationBarColor({
					frontColor:"#000000",
					backgroundColor:'#ffffff'
				})
			},30)			
		}
		if(this.type=='white'){ 
			setTimeout(()=>{
				uni.setNavigationBarColor({
					frontColor:"#ffffff",
					backgroundColor:'#ffffff'
				})
			},30)
		}
		
		// #ifdef MP-WEIXIN
		this.menuButtonInfo=uni.getMenuButtonBoundingClientRect(); 
		console.log(this.menuButtonInfo)
		// #endif
		
	}
}
</script>

<style lang="less">
	/*
		自定义标题栏
	*/
	.header{
		.fix-wrap{
			position: fixed;
			left:0;
			top:0;
			z-index: 1000;
			width: 100%;
		}
		.content{
			position: fixed;
			left:0;
			width: 100%; 			
		}
	} 
	.header-content{
		display: flex;
		justify-content: space-between;
		align-items: center; 
		width: 100%;
		height: 100%;
		.title{
			position: absolute;			 
			text-align: center; 
			/* #ifdef MP-WEIXIN */
			left:25%; 
			width: 50%;
			font-size: 17px;
			height: 32px;
			line-height: 32px;
			/* #endif */
			
			/* #ifdef APP-PLUS || H5 */
			left:15%; 
			width: 70%;
			font-size: 17px;
			height: 44px;
			line-height: 44px;
			/* #endif */ 
			
		}
		.btn{
			/* #ifdef MP-WEIXIN */
			width: 32px;
			height: 32px;
			line-height: 32px;
			/* #endif */
			
			/* #ifdef APP-PLUS || H5 */
			width: 44px;
			height: 44px;
			line-height: 44px;
			/* #endif */ 	 						
			
			text-align: center;				 
		}
				
	}
	.black{
		.header-content{ 
			.title{
				color: #000;
			}
			.btn{
				color: #fff;
			}
		}
	}
	.white{
		.header-content{ 
			.title{
				color: #fff;
			}
			.btn{
				color: #000;
			}
		}
	}
	
	/* 
		微信 胶囊按钮
	*/
	.mp-menuButton{
		position: fixed;
		left:7px;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.line{
			height: 17px;
			border-left: 1px solid #69a8d1; 
		}
		.btn{
			width: 49%;
			height: 30px;
			text-align: center;
			line-height: 30px;
		}
	}
	.mp-menuButton.white{
		border: 1px solid #69a8d1;
		background: rgba(0,0,0,.2);
		color:#fff;
		.line{ 
			border-left: 1px solid #69a8d1; 
		}
	}
	.mp-menuButton.black{
		border: 1px solid #69a8d1;
		background: rgba(255,255,255,.9);
		color:#000;
		.line{
			border-left: 1px solid #fff; 
		}
	}
	
</style>
